<template>
  <div class="box">
    <div class="topBox">
      <div class="topBox_left">
        <div class="topBox_left_top">
          <div class="module_title">
            <div class="">产业总览</div>
            <div
              class="see_more"
              @click="cytpJump('产业画像')"
            >查看更多</div>
          </div>
          <div class="cyzl_echarts">
            <cyzlEcharts
              ref="cyzlEcharts"
              :dataList="cyzlData"
            ></cyzlEcharts>
          </div>
        </div>
        <div class="topBox_left_bottom">
          <div class="module_title">
            <div class="">产业图谱</div>
            <div
              class="see_more"
              @click="cytpJump('产业图谱')"
            >查看更多</div>
          </div>
          <div class="cytp_box">
            <div class="cyhj_big_box">
              <div class="cyhj_box">
                <div
                  class="cyhj_box_title"
                  @click.stop="cytpCA('上游')"
                  :class="cttpCheck == '上游' ? 'cyhj_box_title2' : ''"
                >
                  上游 ( {{ sytotal }} )
                </div>
                <div class="cyhjAuto">
                  <div
                    v-for="(item, index) in cyhjList.sy"
                    :key="index"
                    class="cyhj_auto"
                  >
                    <div
                      class="cyhj_yj"
                      @click="cytpCB(item)"
                      :class="cttpCheck == item.name ? 'cyhj_yj2' : ''"
                    >
                      {{ item.name }} ( {{ item.num }} )
                    </div>
                    <div
                      class="cyhj_nav"
                      v-show="item.show && item.type.length > 0"
                    >
                      <div
                        class="cyhj_nav_title"
                        v-for="(itm, indx) in item.l3Num"
                        :key="indx"
                      >
                        <div
                          class="cyhj_nav_contant"
                          @click="cytpCC(itm, item, indx)"
                          :class="cttpCheck == itm ? 'cyhj_nav_contant2' : ''"
                        >
                          <div style="width: 14px">
                            <div v-if="itm.type && itm.type.length > 0">
                              <img
                                src="~img/right_sj.png"
                                v-if="!itm.childrenIsShow"
                                alt=""
                              />
                              <img
                                src="~img/bottom_sj.png"
                                v-else
                                alt=""
                              />
                            </div>
                          </div>

                          <div>{{ indx }}( {{ itm }} )</div>
                        </div>
                        <div v-if="itm.childrenIsShow">
                          <div
                            v-for="(it, id) in itm.type"
                            :key="id"
                          >
                            <div class="cyhj_children">
                              {{ it.text }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cyhj_box cyhj_label2">
                <div
                  class="cyhj_box_title"
                  @click.stop="cytpCA('中游')"
                  :class="cttpCheck == '中游' ? 'cyhj_box_title2' : ''"
                >
                  中游 ( {{ zytotal }})
                </div>
                <div class="cyhjAuto">
                  <div
                    v-for="(item, index) in cyhjList.zy"
                    :key="index"
                    class="cyhj_auto"
                  >
                    <div
                      class="cyhj_yj"
                      @click="cytpCB(item)"
                      :class="cttpCheck == item.name ? 'cyhj_yj2' : ''"
                    >
                      {{ item.name }} ( {{ item.num }} )
                    </div>
                    <div
                      class="cyhj_nav"
                      v-show="item.show && item.type.length > 0"
                    >
                      <div
                        class="cyhj_nav_title"
                        v-for="(itm, indx) in item.l3Num"
                        :key="indx"
                      >
                        <div
                          class="cyhj_nav_contant"
                          @click="cytpCC(itm, item, indx)"
                          :class="cttpCheck == itm ? 'cyhj_nav_contant2' : ''"
                        >
                          <div style="width: 14px">
                            <div v-if="itm.type && itm.type.length > 0">
                              <img
                                src="~img/right_sj.png"
                                v-if="!itm.childrenIsShow"
                                alt=""
                              />
                              <img
                                src="~img/bottom_sj.png"
                                v-else
                                alt=""
                              />
                            </div>
                          </div>

                          <div>{{ indx }} ( {{ itm }} )</div>
                        </div>
                        <div v-if="itm.childrenIsShow">
                          <div
                            v-for="(it, id) in itm.type"
                            :key="id"
                          >
                            <div class="cyhj_children">
                              {{ it.text }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cyhj_box cyhj_label3">
                <div
                  class="cyhj_box_title"
                  @click.stop="cytpCA('下游')"
                  :class="cttpCheck == '下游' ? 'cyhj_box_title2' : ''"
                >
                  下游 ( {{ xytotal }} )
                </div>
                <div class="cyhjAuto">
                  <div
                    v-for="(item, index) in cyhjList.xy"
                    :key="index"
                    class="cyhj_auto"
                  >
                    <div
                      class="cyhj_yj"
                      @click="cytpCB(item)"
                      :class="cttpCheck == item.name ? 'cyhj_yj2' : ''"
                    >
                      {{ item.name }} ( {{ item.num }} )
                    </div>
                    <div
                      class="cyhj_nav"
                      v-show="item.show && item.type.length > 0"
                    >
                      <div
                        class="cyhj_nav_title"
                        v-for="(itm, indx) in item.l3Num"
                        :key="indx"
                      >
                        <div
                          class="cyhj_nav_contant"
                          @click="cytpCC(itm, item, indx)"
                          :class="cttpCheck == itm ? 'cyhj_nav_contant2' : ''"
                        >
                          <div style="width: 14px">
                            <div v-if="itm.type && itm.type.length > 0">
                              <img
                                src="~img/right_sj.png"
                                v-if="!itm.childrenIsShow"
                                alt=""
                              />
                              <img
                                src="~img/bottom_sj.png"
                                v-else
                                alt=""
                              />
                            </div>
                          </div>

                          <div>{{ indx }}( {{ itm }} )</div>
                        </div>
                        <div v-if="itm.childrenIsShow">
                          <div
                            v-for="(it, id) in itm.type"
                            :key="id"
                          >
                            <div class="cyhj_children">
                              {{ it.text }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="topBox_middle">
        <div class="topBox_middle_top">
          <div class="module_title">
            <div class="">产业地图</div>
            <div
              class="see_more"
              @click.stop="cytpJump('区域分布')"
            >
              查看更多
            </div>
          </div>
          <div class="cydt_box">
            <cydtMap
              :mapPopData="mapPopData"
              :mapLeft="mapLeft"
              @goMap="goMap"
            ></cydtMap>
          </div>
        </div>
        <div class="topBox_middle_bottom">
          <div class="module_title">产业结构</div>
          <div class="cyjg_box">
            <div class="cyjgBox1">
              <cyjgEcharts
                title="注册资本"
                ref="cyjg1"
                :dataList="cyjg.cyjg1"
              ></cyjgEcharts>
            </div>
            <div class="cyjgBox1">
              <cyjgEcharts
                title="上市企业"
                ref="cyjg2"
                :dataList="cyjg.cyjg2"
              ></cyjgEcharts>
            </div>
            <div class="cyjgBox1">
              <cyjgEcharts
                title="科创标签"
                ref="cyjg3"
                :dataList="cyjg.cyjg3"
              ></cyjgEcharts>
            </div>
          </div>
        </div>
      </div>
      <div class="topBox_right">
        <div class="topBox_right_top">
          <div class="module_title">
            <div class="">产业经营</div>
            <div
              class="see_more"
              @click="cytpJump('产业画像')"
            >查看更多</div>
          </div>
          <div class="cyjy_box">
            <div class="cyjy_table_box">
              <div
                class="cyjy_table"
                :class="cyjySelect == 0 ? 'cyjy_table_true' : ''"
                @click="cyjyCheck(0)"
              >
                <div>
                  <div class="cyjy_table_text">营业收入</div>
                  <div class="cyjy_table_num">
                    {{ cyjyHead.zyywsr }}<span class="cyjy_head_dw">亿</span>
                  </div>
                  <div class="cyjy_tbBox">
                    <div>
                      <div class="year_income">
                        <div>2022年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                      <div class="year_income">
                        <div>2023年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                    </div>
                    <div class="cyjy_tbBox_right">
                      <div class="cyfz_right_name">同比</div>
                      <div class="cyfz_right_num">23.50%</div>
                    </div>
                  </div>
                </div>
                <div class="cyjy_head_img">
                  <img
                    src="~img/cyqj_top.png"
                    alt=""
                  />
                </div>
              </div>
              <div
                class="cyjy_table"
                :class="cyjySelect == 1 ? 'cyjy_table_true' : ''"
                @click="cyjyCheck(1)"
              >
                <div>
                  <div class="cyjy_table_text">融资金额</div>
                  <div class="cyjy_table_num">
                    {{ cyjyHead.loanNumBalance
                    }}<span class="cyjy_head_dw">亿</span>
                  </div>
                  <div class="cyjy_tbBox">
                    <div>
                      <div class="year_income">
                        <div>2022年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                      <div class="year_income">
                        <div>2023年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                    </div>
                    <div class="cyjy_tbBox_right">
                      <div class="cyfz_right_name">同比</div>
                      <div class="cyfz_right_num">23.50%</div>
                    </div>
                  </div>
                </div>
                <div class="cyjy_head_img">
                  <img
                    src="~img/cyqj_top.png"
                    alt=""
                  />
                </div>
              </div>
              <div
                class="cyjy_table"
                :class="cyjySelect == 2 ? 'cyjy_table_true' : ''"
                @click="cyjyCheck(2)"
              >
                <div>
                  <div class="cyjy_table_text">专利数量</div>
                  <div class="cyjy_table_num">{{ cyjyHead.zlsl }}</div>
                  <div class="cyjy_tbBox">
                    <div>
                      <div class="year_income">
                        <div>2022年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                      <div class="year_income">
                        <div>2023年</div>
                        <div class="year_income_num">
                          2452<span class="dwyi">亿</span>
                        </div>
                      </div>
                    </div>
                    <div class="cyjy_tbBox_right">
                      <div class="cyfz_right_name">同比</div>
                      <div class="cyfz_right_num">23.50%</div>
                    </div>
                  </div>
                </div>
                <div class="cyjy_head_img">
                  <img
                    src="~img/cyqj_down.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div class="cyjy_ecahrts">
              <cyjyEcharts1 v-if="cyjySelect == 0"></cyjyEcharts1>
              <cyjyEcharts2 v-if="cyjySelect == 1"></cyjyEcharts2>
              <cyjyEcharts3 v-if="cyjySelect == 2"></cyjyEcharts3>
            </div>
          </div>
        </div>
        <div class="topBox_right_bottom">
          <div class="module_title">产业集中度</div>
          <div class="cyjzy_box">
            <div class="cyjzy_title">
              <div
                class="cyjzy_label"
                @click="cyjzyCheck(0)"
                :class="cyjzySelect == 0 ? 'cyjzy_label2' : ''"
              >
                主营业务收入
              </div>
              <div
                class="cyjzy_label"
                @click="cyjzyCheck(1)"
                :class="cyjzySelect == 1 ? 'cyjzy_label2' : ''"
              >
                纳税额
              </div>
              <div
                class="cyjzy_label"
                @click="cyjzyCheck(2)"
                :class="cyjzySelect == 2 ? 'cyjzy_label2' : ''"
              >
                总资产额
              </div>
            </div>
            <div class="cyjzy_contant">
              <div class="cyjzy_table_head">
                <div class="cyjzy_table_line_Monolattice"></div>
                <div class="cyjzy_table_line_Monolattice table_head1">
                  <div class="cyjzy_table_head_name">CR</div>
                  <div class="cyjzy_table_head_num">5</div>
                </div>
                <div class="cyjzy_table_line_Monolattice table_head1">
                  <div class="cyjzy_table_head_name">CR</div>
                  <div class="cyjzy_table_head_num">10</div>
                </div>
              </div>
              <div class="cyjzy_table_two">
                <div class="cyjzy_table_line_Monolattice"></div>
                <div class="cyjzy_table_line_Monolattice2">
                  <div class="table_head2_left">数值（亿元）</div>
                  <div class="table_head2_right">集中度</div>
                </div>
                <div class="cyjzy_table_line_Monolattice2">
                  <div class="table_head2_left">数值（亿元）</div>
                  <div class="table_head2_right">集中度</div>
                </div>
              </div>
              <div class="cyjzd_bigBox">
                <div
                  class="cyjzy_table_two table_contant_line"
                  v-for="(item, index) in cyjzyList"
                  :key="index"
                >
                  <div class="cyjzy_table_line_Monolattice">
                    {{ item.labelName }}
                  </div>
                  <div class="cyjzy_table_line_Monolattice2">
                    <div
                      class="table_contant_left"
                      @click="cyjzyPop('CR5', item.labelName)"
                    >
                      {{ (item.num1 / 1000).toFixed(2) }}
                    </div>
                    <div class="table_contant_right">{{ item.num2 }}</div>
                  </div>
                  <div class="cyjzy_table_line_Monolattice2">
                    <div
                      class="table_contant_left"
                      @click="cyjzyPop('CR10', item.labelName)"
                    >
                      {{ (item.num3 / 1000).toFixed(2) }}
                    </div>
                    <div class="table_contant_right">{{ item.num4 }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="bottomBox_left">
        <div class="module_title">
          <div class="">城市对标</div>
          <div
            class="see_more"
            @click="cytpJump('城市对标')"
          >查看更多</div>
        </div>
        <div class="csdb_box">
          <csdbEcharts></csdbEcharts>
        </div>
      </div>
      <div class="bottomBox_middle">
        <div class="module_title">产业看板</div>
        <div class="csdb_box">
          <cykbEcharts
            :dataList="cykbList"
            ref="cykbEcharts2"
          ></cykbEcharts>
        </div>
      </div>
      <div class="bottomBox_right">
        <div class="module_title">产业赛道</div>
        <div class="csdb_box">
          <cysdEcharts></cysdEcharts>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div class="pop_box">
        <div class="popHead">企业列表</div>
        <div class="pop_contant">
          <div v-if="cyjzdPopList.length > 0">
            <div
              v-for="(item, index) in cyjzdPopList"
              :key="index"
              class="enterprise_name"
            >
              {{ item.qymc }}
            </div>
          </div>

          <div
            v-else
            class="pop_zwsj"
          >暂无数据</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cyhj } from "@/api/screen/cyqj";
import {
  getCYZLAPI,
  getCyqjCyjgCydt,
  getCyqjCyjgCydtLeft,
  getCyqjZbPie,
  getCyqjCykb,
  getCyqjCyjgCydtTop,
  cyqjJdtj,
  getCyqjCyjzd,
  getCyqjCyjzdQy,
} from "@/api/screen/cyqj2";
import cyzlEcharts from "./cyqjComponents/cyzlEcharts.vue";
import cydtMap from "./cyqjComponents/cydtMap.vue";
import cyjyEcharts1 from "./cyqjComponents/cyjyEcharts1.vue";
import cyjyEcharts2 from "./cyqjComponents/cyjyEcharts2.vue";
import cyjyEcharts3 from "./cyqjComponents/cyjyEcharts3.vue";
import cyjgEcharts from "./cyqjComponents/cyjgEcharts.vue";
import csdbEcharts from "./cyqjComponents/csdbEcharts.vue";
import cykbEcharts from "./cyqjComponents/cykbEcharts.vue";
import cysdEcharts from "./cyqjComponents/cysdEcharts.vue";
export default {
  name: "" /*1. Vue扩展 */,
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {
    cyzlEcharts,
    cydtMap,
    cyjgEcharts,
    cyjyEcharts1,
    cyjyEcharts2,
    cyjyEcharts3,
    csdbEcharts,
    cykbEcharts,
    cysdEcharts,
  } /* 2. Vue数据 */,
  props: {
    dropName: {
      type: String,
    },
  },
  model: { prop: "", event: "" }, // model 会使用到 props
  data () {
    return {
      cyjzdPopList: [],
      centerDialogVisible: false,
      cytpPath: [],
      cyjyHead: {
        loanNumBalance: "",
        zlsl: "",
        zyywsr: "",
      },
      sytotal: "",
      zytotal: "",
      xytotal: "",
      cykbList: {
        name: [],
        qys: [],
        zyywsr: [],
        rjzczb: [],
      },
      mapLeft: {},
      cttpCheck: "",
      cyzlData: {
        quarterStr: [],
        riskIndex: [],
        operaIndex: [],
        proIndex: [],
        employIndex: [],
        comIndex: [],
      },
      cyjySelect: 0,
      cyjzySelect: 0,
      cyjzyList: [],
      cyjg: {},
      cyhjList: {
        sy: [],
        zy: [],
        xy: [],
      },
      mapPopData: [],
    };
  },
  computed: {},
  watch: {
    dropName (newName, oldName) {
      console.log(newName, oldName, "事件监听");
    },
  } /* 3. Vue资源 */, // watch 监控的是 props 和 data，有必要时监控computed
  filters: {},
  directives: {} /* 4. Vue生命周期 */,
  created () {
    this.getInitial();
  },
  mounted () { },
  destroy () { } /* 5. Vue方法 */,
  methods: {
    // 页面默认显示
    getInitial () {
      this.defaultdisplay();
      this.getcyhj();
      this.getCykb();
      this.getCyzl();
    },
    defaultdisplay (type, value) {
      let Params = {};
      if (!type) {
        Params = {
          lx: this.dropName,
          lvl: "L1",
        };
        this.cytpPath = ["L1", this.dropName];
      } else if (type == "第一层") {
        Params = {
          lx: this.dropName,
          cpcc: value,
          lvl: "L1",
        };
      } else if (type == "第二层") {
        Params = {
          lx: this.dropName,
          cpmc: value.name,
          lvl: "L2",
        };
      } else if (type == "第三层") {
        console.log(value, "value");
        Params = {
          lx: this.dropName,
          cpxf: value,
          lvl: "L3",
        };
      }
      // 地图鼠标移入弹窗
      getCyqjCyjgCydt(Params).then((response) => {
        this.mapPopData = response.data;
      });
      // 地图左侧信息框
      getCyqjCyjgCydtLeft(Params).then((response) => {
        this.mapLeft = response.data;
      });
      // 产业结构
      getCyqjZbPie(Params).then((response) => {
        this.cyjg = {
          cyjg1: [
            {
              name: "500万及以下",
              value: response.data.fiveHundredCount,
            },
            {
              name: "500-1000万",
              value: response.data.fiveHundredToThousandCount,
            },
            {
              name: "1000-5000万",
              value: response.data.thousandToFiveThousandCount,
            },
            {
              name: "5000万-10000万",
              value: response.data.fiveThousandToHundredMillionCount,
            },
            {
              name: "一亿以上",
              value: response.data.hundredMillionCount,
            },
          ],
          cyjg2: [
            {
              name: "上市企业数量",
              value: response.data.listedCompanyCount,
            },
            {
              name: "非上市企业数量",
              value: response.data.unlistedCompanyCount,
            },
          ],
          cyjg3: [
            {
              name: "独角兽企业",
              value: response.data.unicornCompanyCount,
            },
            {
              name: "专精特新企业",
              value: response.data.zjtxCompanyCount,
            },
            {
              name: "高新技术企业",
              value: response.data.gxjsCompanyCount,
            },
            {
              name: "瞪羚计划企业",
              value: response.data.dljhCompanyCount,
            },
            {
              name: "科技型中小企业",
              value: response.data.kjxzxCompanyCount,
            },
            {
              name: "创新型中小企业",
              value: response.data.cjxzxCompanyCount,
            },
          ],
        };
        this.$nextTick(() => {
          this.$refs.cyjg1.drawChart();
          this.$refs.cyjg2.drawChart();
          this.$refs.cyjg3.drawChart();
        });
      });
      // 产业经营头部
      getCyqjCyjgCydtTop(Params).then((response) => {
        this.cyjyHead = response.data;
        if (this.cyjyHead.zyywsr) {
          this.cyjyHead.zyywsr = (this.cyjyHead.zyywsr * 0.00000001).toFixed(1);
        } else {
          this.cyjyHead.zyywsr = 0.0;
        }
        if (this.cyjyHead.loanNumBalance) {
          this.cyjyHead.loanNumBalance = (
            this.cyjyHead.loanNumBalance * 0.00000001
          ).toFixed(1);
        } else {
          this.cyjyHead.loanNumBalance = 0.0;
        }
        if (!this.cyjyHead.zlsl) {
          this.cyjyHead.zlsl = 0.0;
        }
      });
      // 产业经营图表
      cyqjJdtj(Params).then((response) => { });
      // 产业集中度
      let Params2 = {
        lx: Params.lx,
        lvl: Params.lvl,
      };
      getCyqjCyjzd(Params2).then((response) => {
        this.cyjzyList = response.data;
        this.cyjzyList.forEach((element) => {
          element.num1 = element.cr5Zyywsr;
          element.num2 = element.cr5ZyywsrRatio;
          element.num3 = element.cr10Zyywsr;
          element.num4 = element.cr10ZyywsrRatio;
        });
      });
    },
    // 产业总览
    getCyzl () {
      getCYZLAPI({
        lx: this.dropName,
      }).then((response) => {
        this.cyzlData = {
          quarterStr: [],
          riskIndex: [],
          operaIndex: [],
          proIndex: [],
          employIndex: [],
          comIndex: [],
        };
        response.data.forEach((element) => {
          if (!element.riskIndex) {
            element.riskIndex = 0;
          }
          if (!element.operaIndex) {
            element.operaIndex = 0;
          }
          if (!element.proIndex) {
            element.proIndex = 0;
          }
          if (!element.employIndex) {
            element.employIndex = 0;
          }
          if (!element.comIndex) {
            element.comIndex = 0;
          }

          this.cyzlData.quarterStr.push(element.quarterStr);
          this.cyzlData.riskIndex.push(element.riskIndex);
          this.cyzlData.operaIndex.push(element.operaIndex);
          this.cyzlData.proIndex.push(element.proIndex);
          this.cyzlData.employIndex.push(element.employIndex);
          this.cyzlData.comIndex.push(element.comIndex);
        });
        this.$nextTick(() => {
          this.$refs.cyzlEcharts.drawChart();
        });
      });
    },

    // 获产业图谱数据
    getcyhj () {
      cyhj({
        industryType: this.dropName,
      }).then((response) => {
        console.log(response, "产业拓扑");
        response.forEach((element) => {
          if (element.location == "上游") {
            this.sytotal = element.num;
            for (let i in element.data) {
              element.data[i].show = true;
            }
            this.cyhjList.sy = element.data;
          }
          if (element.location == "中游") {
            this.zytotal = element.num;
            for (let i in element.data) {
              element.data[i].show = true;
            }
            this.cyhjList.zy = element.data;
          }
          if (element.location == "下游") {
            this.xytotal = element.num;
            for (let i in element.data) {
              element.data[i].show = true;
            }
            this.cyhjList.xy = element.data;
          }
        });
      });
    },

    // 产业看板
    getCykb () {
      let that = this;
      getCyqjCykb({
        industryType: this.dropName,
      }).then((response) => {
        let obj = {
          name: [],
          qys: [],
          zyywsr: [],
          rjzczb: [],
        };
        response.data.forEach((element) => {
          obj.name.push(element.lx);
          obj.qys.push(element.qys);
          obj.zyywsr.push(element.zyywsr * 0.00000001);
          obj.rjzczb.push(element.rjzczb);
        });
        that.cykbList = obj;

        this.$nextTick(() => {
          that.$refs.cykbEcharts2.drawChart();
        });
      });
    },
    cytpJump (val) {
      this.$emit("cyqjJump", val);
    },
    cyjzyCheck (val) {
      this.cyjzySelect = val;
      if (val == 0) {
        this.cyjzyList.forEach((element) => {
          element.num1 = element.cr5Zyywsr;
          element.num2 = element.cr5ZyywsrRatio;
          element.num3 = element.cr10Zyywsr;
          element.num4 = element.cr10ZyywsrRatio;
        });
      } else if (val == 1) {
        this.cyjzyList.forEach((element) => {
          element.num1 = element.cr5TaxAmount;
          element.num2 = element.cr5TaxAmountRatio;
          element.num3 = element.cr10TaxAmount;
          element.num4 = element.cr10TaxAmountRatio;
        });
      } else if (val == 2) {
        this.cyjzyList.forEach((element) => {
          element.num1 = element.cr5Zzce;
          element.num2 = element.cr5ZzceRatio;
          element.num3 = element.cr10Zzce;
          element.num4 = element.cr10ZzceRatio;
        });
      }
    },
    cyjyCheck (val) {
      this.cyjySelect = val;
    },

    // 产业集中度弹窗
    cyjzyPop (val, labelName) {
      let str = "";
      for (let i in this.cytpPath) {
        str += this.cytpPath[i] + "-";
      }
      str += labelName;
      if (this.cyjzySelect == 0) {
        str += "-主营业务收入";
      } else if (this.cyjzySelect == 1) {
        str += "-纳税额";
      } else {
        str += "-总资产额";
      }
      getCyqjCyjzdQy({
        labelName: str,
        labelType: val,
        orderBy: this.cyjzySelect + 1,
      }).then((response) => {
        this.cyjzdPopList = response.data;
        this.centerDialogVisible = true;
      });
    },
    // 产业图谱第一层点击
    cytpCA (val) {
      this.cytpPath = ["L1", this.dropName];
      // 取消点击
      if (this.cttpCheck == val) {
        this.defaultdisplay();
        this.cttpCheck = "";
        return;
      }
      // 选中点击
      this.cttpCheck = val;
      this.defaultdisplay("第一层", val);
    },
    // 产业图谱第二层点击
    cytpCB (item) {
      let patharr = item.path.split("-");
      this.cytpPath = patharr.slice(0, patharr.length - 1);
      if (this.cttpCheck == item) {
        this.cttpCheck = "";
        this.defaultdisplay();
        return;
      }
      this.cttpCheck = item.name;
      this.defaultdisplay("第二层", item);
    },
    // 产业图谱第三层点击
    cytpCC (item, itemF, indx) {
      console.log(item, "item");
      let patharr = itemF.path.split("-");
      this.cytpPath = patharr;
      // this.cytpPath = patharr.splice(patharr.length-1,1);
      if (this.cttpCheck == item) {
        this.defaultdisplay();
        this.cttpCheck = "";
        return;
      }
      this.cttpCheck = item;
      this.defaultdisplay("第三层", indx);
    },
    // 打开地图
    goMap () {
      this.$emit('goMap')
    }
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  color: #fff;
}

.topBox {
  width: 100%;
  height: 106%;

  display: flex;
  justify-content: space-between;
}

.topBox_left {
  width: 32%;
  height: 100%;
  padding: 15px;
  background-image: url("~img/cyzlBack.png");
  background-size: 100% 100%;
  // background: linear-gradient(
  //   180deg,
  //   rgba(0, 49, 119) 0%,
  //   rgba(0, 49, 119, 0.3) 100%
  // );
}

.topBox_middle {
  width: 32%;
  height: 100%;
  // background-color: aqua;
}

.topBox_right {
  width: 32%;
  height: 100%;
}

.topBox_left_top {
  width: 100%;
  height: 35%;
  display: flex;
  flex-direction: column;
}

.module_title {
  width: 100%;
  // height: 50px;
  min-height: 50px;
  background-image: url("~img/zyqj_title.png");
  background-size: 100% 100%;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 25px;
  line-height: 25px;
  padding-left: 70px;
  color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
  // cursor: pointer;
}

.cyzl_echarts {
  flex: 1;
  margin-top: -15px;
  width: 100%;
}

.topBox_left_bottom {
  height: 65%;
  width: 100%;
  // background-color: aqua;
  display: flex;
  flex-direction: column;
}

.cytp_box {
  width: 100%;
  flex: 1;
  margin-top: -15px;
  overflow: auto;
}

.topBox_middle_top {
  width: 100%;
  height: 65%;
  display: flex;
  flex-direction: column;
}

.cydt_box {
  width: 100%;
  flex: 1;
  margin-top: -30px;
  // background-color: greenyellow;
}

.topBox_middle_bottom {
  width: 100%;
  height: 35%;
  // background-color: aquamarine;
  display: flex;
  flex-direction: column;
}

.cyjg_box {
  width: 100%;
  flex: 1;
  margin-top: -15px;
  // background-color: cornflowerblue;
  // overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.topBox_right_top {
  width: 100%;
  height: 60%;

  display: flex;
  flex-direction: column;
}

.cyjy_box {
  width: 100%;
  flex: 1;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
}

.topBox_right_bottom {
  width: 100%;
  height: 40%;
  // background-color: cornflowerblue;
  display: flex;
  flex-direction: column;
}

.cyjzy_box {
  width: 100%;
  flex: 1;
  // background-color: aqua;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
}

// ===============产业图谱===========================

.cyhj_box {
  width: 225px;
  display: flex;
  flex-direction: column;
  // height: 48px;
  // text-align: center;
  // line-height: 48px;
  // background-image: url('~img/cyhj_back.png');
  // background-size: 100% 100%;
}

.cyhj_box_title {
  width: 100%;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  background-image: url("~img/cyhj_back.png");
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 10;
}

.cyhj_label2 {
  margin-left: -25px;
  // background-color: red;
}

.cyhj_label3 {
  margin-left: -25px;
}

.cyhj_yj {
  // width: 167px;
  width: 90%;
  height: 46px;
  background-image: url("~img/cyyj_back.png");
  background-size: 100% 100%;
  margin: auto;
  text-align: center;
  line-height: 46px;
  position: relative;
  z-index: 10;
  cursor: pointer;
  font-size: 0.8rem;
}

.cyhj_nav {
  // width: 159px;
  width: 84%;
  overflow: hidden;
  padding: 30px 20px 20px 35px;
  margin: auto;
  font-size: 14px;
  background-size: 100% 100%;
  background-image: url("~img/cyhj_contant.png");
  margin-top: -28px;
}

.cyhj_nav_title {
  margin-top: 15px;
  color: #7cdffb;
  cursor: pointer;
}

.cyhjAuto {
  // background-color: #68c8fa;
  // height: 88%;
  flex: 1;
  width: 100%;
  overflow: auto;
}

.cyhjAuto::-webkit-scrollbar {
  display: none;
}

.cyqjEcharts4_box {
  width: 100%;
  height: 100%;
  // background-color: red;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  // background-color: #d3dce6;
}

::v-deep .el-carousel__container {
  height: 365px;
}

.cyhj_big_box {
  display: flex;
  flex: 1;
  height: 100%;
}

.cyjgBox1 {
  width: 33%;
  height: 100%;
  position: relative;
  // background-color: #7cdffb;
}

.cyjy_table_box {
  width: 100%;
  height: 105px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.cyjy_table {
  width: 33%;
  height: 100%;
  padding: 15px;
  background: linear-gradient(-33deg,
      rgba(3, 37, 106) 0%,
      rgba(5, 46, 115) 100%);
  position: relative;
  display: flex;
  // justify-content: space-between;
  // justify-content: center;
  cursor: pointer;
  border-bottom: 2px solid rgba(38, 148, 210, 0);
}

.cyjy_table_text {
  color: #68c8fa;
  font-size: 16px;
}

.cyjy_table_num {
  font-size: 17px;
  font-weight: bold;
  display: flex;
  // align-items: center;
}

.cyjy_table_true {
  background: linear-gradient(-33deg, #5293f7 0%, #0b66d1 0%, #19369b 100%);
  border-bottom: 2px solid #2694d2;
}

.cyjy_ecahrts {
  width: 100%;
  flex: 1;
  // background-color: aquamarine;
}

.cyjzy_title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;

  display: flex;
  // background-color: #0b66d1;
}

.cyjzy_label {
  width: 33%;
  height: 100%;
  color: #166dda;
  background-image: url("~img/cyhx_smallTitle2.png");
  background-size: 100% 100%;
  padding-left: 40px;
  cursor: pointer;
}

.cyjzy_label2 {
  width: 33%;
  height: 100%;
  color: #fff;
  background-image: url("~img/cyhx_smallTitle.png");
  background-size: 100% 100%;
  padding-left: 40px;
}

.cyjzy_contant {
  width: 100%;
  // flex: 1;
  height: 222px;
  padding-top: 10px;
}

.cyjzy_table_head {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-between;
}

.cyjzy_table_line_Monolattice {
  width: 31.5%;
  height: 100%;
  // background-color: #0b66d1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
}

.cyjzy_table_line_Monolattice2 {
  width: 31.5%;
  height: 100%;
  margin-left: 3%;
  // background-color: #0b66d1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cyjzy_table_head_name {
  color: #8cc4ff;
  // font-size: 28px;
  font-size: 1.8rem;
  font-family: YouSheBiaoTiHei;
}

.cyjzy_table_head_num {
  color: #8cc4ff;
  font-family: YouSheBiaoTiHei;
  font-size: 15;
  margin-top: 7px;
}

.cyjzy_table_two {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-between;
}

.table_head1 {
  // background-color: #022166;
  background-image: url("~img/cyqj_table_head.png");
  background-size: 100% 100%;
}

.table_head2 {}

.table_head2_left {
  background: linear-gradient(0deg, #015eea, #00c0fa);
  width: 59%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // font-size: 14px;
  font-size: 0.8rem;
}

.table_head2_right {
  background: linear-gradient(0deg, #015eea, #00c0fa);
  width: 38%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // font-size: 14px;
  font-size: 0.8rem;
}

.table_contant_left {
  width: 59%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #81daf8;
  text-decoration: #00c0fa;
  cursor: pointer;
  background-color: rgba(9, 35, 89, 0.5);
}

.table_contant_right {
  width: 38%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background-color: rgba(9, 35, 89, 0.5);
}

.table_contant_line {
  height: 19%;
  border-top: 1px solid #1f55c3;
}

.bottomBox {
  width: 100%;
  height: 50%;
  display: flex;
  margin-top: 40px;
  justify-content: space-between;
  // background-color: rgb(192, 210, 255);
}

.bottomBox_left {
  width: 32%;
  height: 100%;
  // background-color: #00c0fa;
  display: flex;
  flex-direction: column;
}

.bottomBox_middle {
  width: 32%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: #f5c36d;
}

.bottomBox_right {
  width: 32%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background-color: #ff907d;
}

.csdb_box {
  width: 100%;
  flex: 1;
  // background-color: pink;
}

.cyhj_nav_contant {
  font-size: 0.8rem;
}

.cyjy_head_img {
  margin-left: 5px;
  right: 13px;
  position: absolute;

  img {
    width: 49px;
  }
}

.curpont {
  cursor: pointer;
}

// .curpont:hover {
//   color: #0095f9;
// }
.cyhj_box_title2 {
  font-weight: bold;
  color: #68c8fa;
}

.cyhj_yj2 {
  font-weight: bold;
  color: #68c8fa;
}

.cyhj_nav_contant2 {
  font-weight: bold;
  color: #fff;
}

.cyjy_head_dw {
  font-size: 14px;
}

.cyjzd_bigBox {
  width: 100%;
  height: 95%;
  // background-color: red;
  overflow: auto;
}

::v-deep .el-dialog__header {
  display: none;
}

::v-deep .el-dialog {
  background-color: rgba(0, 0, 0, 0);
}

::v-deep .el-dialog__body {
  padding: 0;
  background-color: rgba(0, 0, 0, 0);
}

.popHead {
  width: 250px;
  height: 40px;
  text-align: center;
  line-height: 45px;
  color: white;
  font-weight: bold;
  margin: auto;
  background-image: url(~img/card_header.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  z-index: 100;
}

.pop_box {
  // background-color: red;
}

.pop_contant {
  box-shadow: 1px 1px 20px 3px rgba(0, 100, 199, 0.6) inset,
    -1px -1px 20px 3px rgba(0, 100, 199, 0.6) inset;
  background: #0c276a;
  color: #00c0fa;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
  margin-top: -20px;
}

.enterprise_name {
  margin: 20px 0;
}

.pop_zwsj {
  margin: 20px 0;
}

.see_more {
  font-size: 14px;
  font-weight: 400;
  // font-family: auto;
  margin-right: 30px;
  color: #00a3f5;
  cursor: pointer;
}

.see_more:hover {
  color: #5bd6ee;
}

.year_income {
  display: flex;
  font-size: 13px;
}

.year_income_num {
  font-size: 17px;
  margin-left: 10px;
  // font-weight: bold;
}

.dwyi {
  font-size: 13px;
  font-weight: bold;
}

.cyjy_tbBox {
  display: flex;
}

.cyfz_right_name {
  color: #68c8fa;

}

.cyfz_right_num {
  color: #f07561;
}

.cyjy_tbBox_right {
  font-size: 14px;
}
</style>
